﻿<template>
    <el-container>
        <el-main>
            <el-form ref="form"
                     :model="data"
                     :rules="formRules"
                     label-width="120px">

                <el-form-item label="用户名"
                              prop="userName">
                    <el-input v-model="data.userName"></el-input>
                </el-form-item>

                <el-form-item label="名字"
                              prop="name">
                    <el-input v-model="data.name"></el-input>
                </el-form-item>

                <el-form-item label="姓"
                              prop="surname">
                    <el-input v-model="data.surname"></el-input>
                </el-form-item>

                <el-form-item label="电子邮件"
                              prop="email">
                    <el-input v-model="data.email"></el-input>
                </el-form-item>

                <el-form-item label="手机号码"
                              prop="phoneNumber">
                    <el-input v-model="data.phoneNumber"></el-input>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer style="text-align:right;">
            <el-button @click="$emit('cancel')">取消</el-button>
            <el-button type="primary" @click="onSave">保存</el-button>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                data: {},
                formRules: {
                    userName: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入电子邮件', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                }
            }
        },
        mounted() {
            var self = this;
            self.refresh();
        },
        methods: {
            refresh() {
                var self = this;
                self.$http
                    .get('/api/identity/my-profile')
                    .then((data) => {
                        self.data = data;
                    });
            },
            onSave() {
                var self = this;
                self.$refs.form.validate((valid) => {
                    if (valid) {
                        self.$http
                            .put('/api/identity/my-profile', self.data)
                            .then((data) => {
                                self.data = data;

                                //个人设置已保存
                                self.$notify({
                                    title: '个人设置已保存',
                                    position: 'bottom-right',
                                    type: 'success'
                                });

                                self.$emit("cancel");
                            });
                    } else {
                        return false;
                    }
                });
            },

        }
    }
</script>

<style scoped>
</style>